<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" @on-delete="handleDelete"></tables>
    </Card>
    <Modal
      v-model="voteModalVisible"
      title="编辑投票信息"
      @on-cancel="closeVoteModal">
      <Form :model="currentVoteItem" label-position="top">
        <FormItem label="投票id">
          <Input v-model="currentVoteItem.vote_id" readonly />
        </FormItem>
        <FormItem label="用户">
          <Input v-model="currentVoteItem.user_id" />
        </FormItem>
        <FormItem label="创建时间">
          <DatePicker v-model="currentVoteItem.createTime" type="date" placeholder="选择日期"></DatePicker>
        </FormItem>
        <FormItem label="结束时间">
          <DatePicker v-model="currentVoteItem.endtime" type="date" placeholder="选择日期"></DatePicker>
        </FormItem>
        <FormItem label="状态">
          <Input v-model="currentVoteItem.status" />
        </FormItem>
        <FormItem label="标题">
          <Input v-model="currentVoteItem.title" />
        </FormItem>
        <FormItem label="投票详情">
          <Input v-model="currentVoteItem.vote_desc" type="textarea" />
        </FormItem>
        <FormItem label="图片">
          <img :src="currentVoteItem.vote_img" class="img-thumbnail" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="saveVote">保存</Button>
        <Button @click="closeVoteModal">取消</Button>
      </div>
    </Modal>
  </div> 
</template>

<script>
import Tables from '_c/tables'
import { getTableData } from '@/api/data'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        { title: '投票id', key: 'vote_id', sortable: true },
        { title: '用户', key: 'user_id', editable: true },
        { title: 'Create-Time', key: 'createTime' },
        { title: '结束时间', key: 'endtime', sortable: true },
        { title: '状态', key: 'status', editable: true },
        { title: '标题', key: 'title' },
        { title: '投票详情', key: 'vote_desc' },
        { title: '图片', key: 'vote_img' },
        {
          title: 'Handle',
          key: 'handle',
          button: [
            (h, params) => {
              return h('div', [
                h('Button', {
                  props: { type: 'primary', size: 'small' },
                  style: { marginRight: '5px' },
                  on: { click: () => this.handleEditVote(params) }
                }, '编辑'),
                h('Poptip', {
                  props: { confirm: true, title: '你确定要删除吗?' },
                  on: { 'on-ok': () => this.handleDeleteVote(params) }
                }, [
                  h('Button', { props: { type: 'error', size: 'small' } }, '删除')
                ])
              ]);
            }
          ]
        }
      ],
      voteModalVisible: false,
      currentVoteItem: {},
      tableData: [
        { vote_id: '1', user_id: 'user1', createTime: '2024-11-11T08:00:00Z', endtime: '2024-11-18T08:00:00Z', status: '进行中', title: '最佳员工评选', vote_desc: '评选出本年度最佳员工', vote_img: 'http://example.com/vote1.jpg' },
        { vote_id: '2', user_id: 'user2', createTime: '2024-11-12T09:00:00Z', endtime: '2024-11-19T09:00:00Z', status: '已结束', title: '产品满意度调查', vote_desc: '调查用户对产品的满意度', vote_img: 'http://example.com/vote2.jpg' },
        { vote_id: '3', user_id: 'user3', createTime: '2024-11-13T10:00:00Z', endtime: '2024-11-20T10:00:00Z', status: '即将开始', title: '服务之星评选', vote_desc: '评选出服务之星', vote_img: 'http://example.com/vote3.jpg' },
        { vote_id: '4', user_id: 'user4', createTime: '2024-11-14T11:00:00Z', endtime: '2024-11-21T11:00:00Z', status: '进行中', title: '创意提案大赛', vote_desc: '征集并评选最佳创意提案', vote_img: 'http://example.com/vote4.jpg' },
        { vote_id: '5', user_id: 'user5', createTime: '2024-11-15T12:00:00Z', endtime: '2024-11-22T12:00:00Z', status: '已结束', title: '年度优秀团队', vote_desc: '评选年度优秀团队', vote_img: 'http://example.com/vote5.jpg' }
      ]
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    handleEditVote(params) {
      this.currentVoteItem = {...params.row}; 
      this.voteModalVisible = true; 
    },
    handleDeleteVote(params) {
      console.log(params);
    },
    saveVote() {
      this.voteModalVisible = false; 
    },
    closeVoteModal() {
      this.voteModalVisible = false; 
    },
  },
  mounted () {
    getTableData().then(res => {
      console.log(res)
      // this.tableData = res.data
    })
  }
}
</script>
<style>
</style>
